<template>
  <div class="product-management-container">
    <h1>商品管理</h1>
    
    <div class="action-bar">
      <div class="search-box">
        <input 
          type="text" 
          v-model="searchQuery" 
          placeholder="搜索商品名称、编号..." 
          @input="handleSearch"
        />
        <button class="search-button">
          <i class="icon-search"></i>
        </button>
      </div>
      
      <div class="filter-buttons">
        <button @click="filterByCategory('all')" :class="{ active: currentCategory === 'all' }">全部</button>
        <button @click="filterByCategory('服装')" :class="{ active: currentCategory === '服装' }">服装</button>
        <button @click="filterByCategory('电子')" :class="{ active: currentCategory === '电子' }">电子</button>
        <button @click="filterByCategory('家居')" :class="{ active: currentCategory === '家居' }">家居</button>
        <button @click="filterByCategory('食品')" :class="{ active: currentCategory === '食品' }">食品</button>
        <button @click="filterByCategory('美妆')" :class="{ active: currentCategory === '美妆' }">美妆</button>
      </div>
      
      <button class="add-button" @click="showAddProductModal">
        <i class="icon-add"></i> 添加商品
      </button>
    </div>
    
    <div class="products-table">
      <table>
        <thead>
          <tr>
            <th>商品图片</th>
            <th>商品编号</th>
            <th>商品名称</th>
            <th>分类</th>
            <th>价格</th>
            <th>库存</th>
            <th>状态</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="product in paginatedProducts" :key="product.id">
            <td>
              <img :src="product.image" alt="商品图片" class="product-image">
            </td>
            <td>{{ product.id }}</td>
            <td>{{ product.name }}</td>
            <td>{{ product.category }}</td>
            <td>¥{{ product.price }}</td>
            <td>{{ product.stock }}</td>
            <td>
              <span :class="['status-badge', product.status === '上架' ? 'status-active' : 'status-inactive']">
                {{ product.status }}
              </span>
            </td>
            <td class="actions">
              <button class="view-btn" @click="viewProductDetails(product)">查看</button>
              <button class="edit-btn" @click="editProduct(product)">编辑</button>
              <button 
                :class="['status-btn', product.status === '上架' ? 'disable-btn' : 'enable-btn']" 
                @click="toggleProductStatus(product)"
              >
                {{ product.status === '上架' ? '下架' : '上架' }}
              </button>
              <button class="delete-btn" @click="deleteProduct(product)">删除</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    
    <div class="pagination" v-if="totalPages > 1">
      <button v-for="page in totalPages" :key="page" @click="goToPage(page)" :class="{ active: currentPage === page }">{{ page }}</button>
    </div>
    
    <!-- 商品详情模态框 -->
    <div class="modal" v-if="showDetailsModal">
      <div class="modal-content modal-lg">
        <div class="modal-header">
          <h2>商品详情</h2>
          <button class="close-btn" @click="closeDetailsModal">&times;</button>
        </div>
        <div class="modal-body">
          <div class="product-details">
            <div class="product-images">
              <img :src="currentProduct.image" alt="商品主图" class="main-image">
              <div class="image-thumbnails" v-if="currentProduct.gallery && currentProduct.gallery.length">
                <img 
                  v-for="(img, index) in currentProduct.gallery" 
                  :key="index" 
                  :src="img" 
                  alt="商品图片" 
                  class="thumbnail"
                >
              </div>
            </div>
            
            <div class="product-info">
              <h3>{{ currentProduct.name }}</h3>
              
              <div class="info-row">
                <div class="info-label">商品编号：</div>
                <div class="info-value">{{ currentProduct.id }}</div>
              </div>
              
              <div class="info-row">
                <div class="info-label">分类：</div>
                <div class="info-value">{{ currentProduct.category }}</div>
              </div>
              
              <div class="info-row">
                <div class="info-label">价格：</div>
                <div class="info-value price">¥{{ currentProduct.price }}</div>
              </div>
              
              <div class="info-row">
                <div class="info-label">库存：</div>
                <div class="info-value">{{ currentProduct.stock }}</div>
              </div>
              
              <div class="info-row">
                <div class="info-label">状态：</div>
                <div class="info-value">
                  <span :class="['status-badge', currentProduct.status === '上架' ? 'status-active' : 'status-inactive']">
                    {{ currentProduct.status }}
                  </span>
                </div>
              </div>
              
              <div class="info-row">
                <div class="info-label">创建时间：</div>
                <div class="info-value">{{ currentProduct.createTime }}</div>
              </div>
              
              <div class="info-row">
                <div class="info-label">更新时间：</div>
                <div class="info-value">{{ currentProduct.updateTime }}</div>
              </div>
            </div>
          </div>
          
          <div class="product-description">
            <h3>商品描述</h3>
            <div class="description-content">{{ currentProduct.description }}</div>
          </div>
          
          <div class="product-specs" v-if="currentProduct.specs && currentProduct.specs.length">
            <h3>规格参数</h3>
            <table class="specs-table">
              <tbody>
                <tr v-for="(spec, index) in currentProduct.specs" :key="index">
                  <td class="spec-name">{{ spec.name }}</td>
                  <td class="spec-value">{{ spec.value }}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 添加/编辑商品模态框 -->
    <div class="modal" v-if="showEditModal">
      <div class="modal-content modal-lg">
        <div class="modal-header">
          <h2>{{ isEditing ? '编辑商品' : '添加商品' }}</h2>
          <button class="close-btn" @click="closeEditModal">&times;</button>
        </div>
        <div class="modal-body">
          <div class="form-group">
            <label>商品名称</label>
            <input type="text" v-model="editingProduct.name">
          </div>
          
          <div class="form-group">
            <label>商品分类</label>
            <select v-model="editingProduct.category">
              <option value="服装">服装</option>
              <option value="电子">电子</option>
              <option value="家居">家居</option>
              <option value="食品">食品</option>
              <option value="美妆">美妆</option>
              <option value="母婴">母婴</option>
              <option value="运动">运动</option>
            </select>
          </div>
          
          <div class="form-group">
            <label>商品价格</label>
            <input type="number" v-model="editingProduct.price" min="0" step="0.01">
          </div>
          
          <div class="form-group">
            <label>商品库存</label>
            <input type="number" v-model="editingProduct.stock" min="0">
          </div>
          
          <div class="form-group">
            <label>商品状态</label>
            <select v-model="editingProduct.status">
              <option value="上架">上架</option>
              <option value="下架">下架</option>
            </select>
          </div>
          
          <div class="form-group">
            <label>商品图片</label>
            <div class="image-upload">
              <div class="upload-preview">
                <img :src="editingProduct.image" alt="商品图片" class="preview-image">
              </div>
              <button class="upload-btn">上传图片</button>
            </div>
          </div>
          
          <div class="form-group">
            <label>商品描述</label>
            <textarea v-model="editingProduct.description" rows="5"></textarea>
          </div>
          
          <div class="form-group">
            <label>规格参数</label>
            <div class="specs-editor">
              <div v-for="(spec, index) in editingProduct.specs" :key="index" class="spec-item">
                <input type="text" v-model="spec.name" placeholder="参数名">
                <input type="text" v-model="spec.value" placeholder="参数值">
                <button class="remove-btn" @click="removeSpec(index)">删除</button>
              </div>
              <button class="add-spec-btn" @click="addSpec">添加规格参数</button>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="cancel-btn" @click="closeEditModal">取消</button>
          <button class="save-btn" @click="saveProduct">保存</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ProductManagement',
  data() {
    return {
      products: [
        {
          id: 'P001',
          name: '男士休闲衬衫',
          category: '服装',
          price: 129.00,
          stock: 200,
          status: '上架',
          image: 'https://via.placeholder.com/100x100?text=Shirt',
          gallery: [
            'https://via.placeholder.com/400x400?text=Shirt1',
            'https://via.placeholder.com/400x400?text=Shirt2',
            'https://via.placeholder.com/400x400?text=Shirt3'
          ],
          description: '这是一款舒适的男士休闲衬衫，采用优质棉质面料，透气性好，穿着舒适。多种颜色可选，适合日常休闲和商务场合。',
          specs: [
            { name: '材质', value: '100%棉' },
            { name: '颜色', value: '蓝色、白色、灰色' },
            { name: '尺码', value: 'M、L、XL、XXL' },
            { name: '产地', value: '中国' }
          ],
          createTime: '2023-05-10 14:30',
          updateTime: '2023-06-15 09:45'
        },
        {
          id: 'P002',
          name: '女士牛仔裤',
          category: '服装',
          price: 199.50,
          stock: 150,
          status: '上架',
          image: 'https://via.placeholder.com/100x100?text=Jeans',
          gallery: [
            'https://via.placeholder.com/400x400?text=Jeans1',
            'https://via.placeholder.com/400x400?text=Jeans2'
          ],
          description: '时尚修身女士牛仔裤，采用优质牛仔面料，弹性好，穿着舒适。修身设计，展现完美身材曲线。',
          specs: [
            { name: '材质', value: '98%棉 2%氨纶' },
            { name: '颜色', value: '深蓝色、浅蓝色、黑色' },
            { name: '尺码', value: '26、27、28、29、30' },
            { name: '产地', value: '中国' }
          ],
          createTime: '2023-05-12 11:20',
          updateTime: '2023-06-10 16:35'
        },
        {
          id: 'P003',
          name: '运动跑鞋',
          category: '运动',
          price: 459.00,
          stock: 100,
          status: '上架',
          image: 'https://via.placeholder.com/100x100?text=Shoes',
          gallery: [
            'https://via.placeholder.com/400x400?text=Shoes1',
            'https://via.placeholder.com/400x400?text=Shoes2',
            'https://via.placeholder.com/400x400?text=Shoes3'
          ],
          description: '专业运动跑鞋，采用轻量化设计，缓震性能好，适合长跑和日常健身。透气网面，穿着舒适。',
          specs: [
            { name: '材质', value: '网面+橡胶底' },
            { name: '颜色', value: '黑色、白色、红色' },
            { name: '尺码', value: '39-45' },
            { name: '产地', value: '越南' }
          ],
          createTime: '2023-05-15 09:10',
          updateTime: '2023-06-05 14:20'
        },
        {
          id: 'P004',
          name: '棒球帽',
          category: '服装',
          price: 89.00,
          stock: 300,
          status: '上架',
          image: 'https://via.placeholder.com/100x100?text=Cap',
          gallery: [
            'https://via.placeholder.com/400x400?text=Cap1',
            'https://via.placeholder.com/400x400?text=Cap2'
          ],
          description: '时尚棒球帽，采用优质棉质面料，透气舒适，适合各种休闲场合。可调节帽围，适合不同头型。',
          specs: [
            { name: '材质', value: '100%棉' },
            { name: '颜色', value: '红色、黑色、蓝色、白色' },
            { name: '尺码', value: '可调节，适合头围54-60cm' },
            { name: '产地', value: '中国' }
          ],
          createTime: '2023-05-18 16:40',
          updateTime: '2023-06-02 10:15'
        },
        {
          id: 'P005',
          name: '智能手表',
          category: '电子',
          price: 899.00,
          stock: 50,
          status: '上架',
          image: 'https://via.placeholder.com/100x100?text=Watch',
          gallery: [
            'https://via.placeholder.com/400x400?text=Watch1',
            'https://via.placeholder.com/400x400?text=Watch2',
            'https://via.placeholder.com/400x400?text=Watch3'
          ],
          description: '多功能智能手表，支持心率监测、睡眠监测、运动记录等功能。防水设计，长续航，是您健康生活的好伴侣。',
          specs: [
            { name: '屏幕', value: '1.4英寸AMOLED' },
            { name: '电池', value: '300mAh，续航7天' },
            { name: '防水', value: 'IP68级防水' },
            { name: '功能', value: '心率监测、睡眠监测、运动模式、消息提醒' },
            { name: '颜色', value: '黑色、银色' },
            { name: '产地', value: '中国' }
          ],
          createTime: '2023-05-20 10:30',
          updateTime: '2023-06-18 14:50'
        },
        {
          id: 'P006',
          name: '智能手机',
          category: '电子',
          price: 3999.00,
          stock: 30,
          status: '上架',
          image: 'https://via.placeholder.com/100x100?text=Phone',
          gallery: [
            'https://via.placeholder.com/400x400?text=Phone1',
            'https://via.placeholder.com/400x400?text=Phone2',
            'https://via.placeholder.com/400x400?text=Phone3'
          ],
          description: '高性能智能手机，搭载最新处理器，6.5英寸全面屏，4800万像素四摄，大容量电池，支持快充。',
          specs: [
            { name: '屏幕', value: '6.5英寸AMOLED，2400x1080分辨率' },
            { name: '处理器', value: '骁龙8系列' },
            { name: '内存', value: '8GB/12GB' },
            { name: '存储', value: '128GB/256GB' },
            { name: '摄像头', value: '前置2000万，后置4800万主摄+1200万超广角+800万长焦+500万微距' },
            { name: '电池', value: '4500mAh，支持65W快充' },
            { name: '系统', value: 'Android 12' },
            { name: '颜色', value: '黑色、蓝色、白色' },
            { name: '产地', value: '中国' }
          ],
          createTime: '2023-05-22 09:15',
          updateTime: '2023-06-20 11:30'
        },
        {
          id: 'P007',
          name: '蓝牙耳机',
          category: '电子',
          price: 299.00,
          stock: 200,
          status: '上架',
          image: 'https://via.placeholder.com/100x100?text=Earphone',
          gallery: [
            'https://via.placeholder.com/400x400?text=Earphone1',
            'https://via.placeholder.com/400x400?text=Earphone2'
          ],
          description: '真无线蓝牙耳机，采用蓝牙5.2技术，低延迟，高音质。内置降噪麦克风，通话清晰。单次充电可使用5小时，配合充电盒可使用24小时。',
          specs: [
            { name: '蓝牙版本', value: '5.2' },
            { name: '续航时间', value: '单次5小时，充电盒24小时' },
            { name: '防水等级', value: 'IPX5' },
            { name: '功能', value: '触控操作、降噪通话、语音助手' },
            { name: '颜色', value: '黑色、白色' },
            { name: '产地', value: '中国' }
          ],
          createTime: '2023-05-25 14:20',
          updateTime: '2023-06-15 16:40'
        },
        {
          id: 'P008',
          name: '平板电脑',
          category: '电子',
          price: 2599.00,
          stock: 40,
          status: '上架',
          image: 'https://via.placeholder.com/100x100?text=Tablet',
          gallery: [
            'https://via.placeholder.com/400x400?text=Tablet1',
            'https://via.placeholder.com/400x400?text=Tablet2',
            'https://via.placeholder.com/400x400?text=Tablet3'
          ],
          description: '10.5英寸平板电脑，2K分辨率屏幕，搭载高性能处理器，支持手写笔，适合办公、学习和娱乐。',
          specs: [
            { name: '屏幕', value: '10.5英寸IPS，2560x1600分辨率' },
            { name: '处理器', value: '8核处理器' },
            { name: '内存', value: '6GB' },
            { name: '存储', value: '64GB/128GB，支持TF卡扩展' },
            { name: '摄像头', value: '前置800万，后置1300万' },
            { name: '电池', value: '7500mAh' },
            { name: '系统', value: 'Android 12' },
            { name: '颜色', value: '银色、灰色' },
            { name: '产地', value: '中国' }
          ],
          createTime: '2023-05-28 11:10',
          updateTime: '2023-06-22 09:25'
        },
        {
          id: 'P009',
          name: '无线耳机',
          category: '电子',
          price: 799.00,
          stock: 60,
          status: '上架',
          image: 'https://via.placeholder.com/100x100?text=Headphone',
          gallery: [
            'https://via.placeholder.com/400x400?text=Headphone1',
            'https://via.placeholder.com/400x400?text=Headphone2'
          ],
          description: '头戴式无线耳机，主动降噪，高清音质，舒适佩戴，长续航，适合办公、游戏和音乐欣赏。',
          specs: [
            { name: '蓝牙版本', value: '5.0' },
            { name: '续航时间', value: '30小时' },
            { name: '降噪', value: '主动降噪，可降噪35dB' },
            { name: '功能', value: '触控操作、语音助手、快速充电' },
            { name: '颜色', value: '黑色、白色、蓝色' },
            { name: '产地', value: '中国' }
          ],
          createTime: '2023-06-01 15:30',
          updateTime: '2023-06-20 14:15'
        },
        {
          id: 'P010',
          name: '4K智能电视',
          category: '电子',
          price: 3299.00,
          stock: 20,
          status: '上架',
          image: 'https://via.placeholder.com/100x100?text=TV',
          gallery: [
            'https://via.placeholder.com/400x400?text=TV1',
            'https://via.placeholder.com/400x400?text=TV2'
          ],
          description: '55英寸4K智能电视，HDR显示，杜比音效，智能语音控制，丰富的应用生态，带来极致的视听体验。',
          specs: [
            { name: '屏幕', value: '55英寸LED，4K分辨率' },
            { name: '处理器', value: '四核处理器' },
            { name: '内存', value: '2GB' },
            { name: '存储', value: '32GB' },
            { name: '接口', value: 'HDMI x3，USB x2，网络接口x1' },
            { name: '功能', value: '智能语音，应用商店，屏幕投射' },
            { name: '颜色', value: '黑色' },
            { name: '产地', value: '中国' }
          ],
          createTime: '2023-06-05 10:20',
          updateTime: '2023-06-25 16:30'
        }
      ],
      currentPage: 1,
      itemsPerPage: 5,
      searchQuery: '',
      currentCategory: 'all',
      showDetailsModal: false,
      showEditModal: false,
      currentProduct: {},
      editingProduct: {},
      isEditing: false
    };
  },
  computed: {
    filteredProducts() {
      let result = this.products;
      
      // 应用分类筛选
      if (this.currentCategory !== 'all') {
        result = result.filter(product => product.category === this.currentCategory);
      }
      
      // 应用搜索筛选
      if (this.searchQuery) {
        const query = this.searchQuery.toLowerCase();
        result = result.filter(product => 
          product.id.toLowerCase().includes(query) || 
          product.name.toLowerCase().includes(query)
        );
      }
      
      return result;
    },
    paginatedProducts() {
      const start = (this.currentPage - 1) * this.itemsPerPage;
      const end = start + this.itemsPerPage;
      return this.filteredProducts.slice(start, end);
    },
    totalPages() {
      return Math.ceil(this.filteredProducts.length / this.itemsPerPage);
    }
  },
  methods: {
    goToPage(page) {
      this.currentPage = page;
    },
    filterByCategory(category) {
      this.currentCategory = category;
      this.currentPage = 1; // 重置到第一页
    },
    handleSearch() {
      this.currentPage = 1; // 搜索时重置到第一页
    },
    viewProductDetails(product) {
      this.currentProduct = { ...product };
      this.showDetailsModal = true;
    },
    closeDetailsModal() {
      this.showDetailsModal = false;
    },
    showAddProductModal() {
      this.isEditing = false;
      this.editingProduct = {
        id: 'P' + (this.products.length + 1).toString().padStart(3, '0'),
        name: '',
        category: '服装',
        price: 0,
        stock: 0,
        status: '下架',
        image: 'https://via.placeholder.com/100x100?text=New',
        gallery: [],
        description: '',
        specs: [],
        createTime: new Date().toISOString().replace('T', ' ').substring(0, 16),
        updateTime: new Date().toISOString().replace('T', ' ').substring(0, 16)
      };
      this.showEditModal = true;
    },
    editProduct(product) {
      this.isEditing = true;
      this.editingProduct = { ...product };
      this.showEditModal = true;
    },
    closeEditModal() {
      this.showEditModal = false;
    },
    saveProduct() {
      if (!this.editingProduct.name || !this.editingProduct.price) {
        alert('商品名称和价格不能为空');
        return;
      }
      
      // 更新时间
      this.editingProduct.updateTime = new Date().toISOString().replace('T', ' ').substring(0, 16);
      
      if (this.isEditing) {
        // 编辑现有商品
        const index = this.products.findIndex(p => p.id === this.editingProduct.id);
        if (index !== -1) {
          this.products[index] = { ...this.editingProduct };
        }
      } else {
        // 添加新商品
        this.products.unshift({ ...this.editingProduct });
      }
      
      alert(this.isEditing ? '商品已更新' : '商品已添加');
      this.closeEditModal();
    },
    toggleProductStatus(product) {
      const index = this.products.findIndex(p => p.id === product.id);
      if (index !== -1) {
        this.products[index].status = this.products[index].status === '上架' ? '下架' : '上架';
        this.products[index].updateTime = new Date().toISOString().replace('T', ' ').substring(0, 16);
      }
    },
    deleteProduct(product) {
      if (confirm(`确定要删除商品 ${product.name} 吗？`)) {
        const index = this.products.findIndex(p => p.id === product.id);
        if (index !== -1) {
          this.products.splice(index, 1);
          alert('商品已删除');
        }
      }
    },
    addSpec() {
      if (!this.editingProduct.specs) {
        this.editingProduct.specs = [];
      }
      this.editingProduct.specs.push({ name: '', value: '' });
    },
    removeSpec(index) {
      this.editingProduct.specs.splice(index, 1);
    }
  }
}
</script>

<style scoped>
.product-management-container {
  padding: 20px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow-y: auto;
}

.action-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 15px;
}

.search-box {
  position: relative;
  width: 300px;
}

.search-box input {
  width: 100%;
  padding: 10px 40px 10px 15px;
  border: 1px solid #ddd;
  border-radius: 25px;
  font-size: 14px;
}

.search-button {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 18px;
  color: #666;
  cursor: pointer;
}

.icon-search:before {
  content: "🔍";
}

.icon-add:before {
  content: "+";
}

.filter-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.filter-buttons button {
  padding: 8px 15px;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
}

.filter-buttons button.active {
  background-color: #4a90e2;
  color: white;
  border-color: #4a90e2;
}

.add-button {
  padding: 8px 15px;
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
}

.products-table {
  width: 100%;
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

th {
  background-color: #f5f5f5;
  font-weight: bold;
}

tr:hover {
  background-color: #f9f9f9;
}

.product-image {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 4px;
}

.status-badge {
  padding: 5px 10px;
  border-radius: 15px;
  font-size: 12px;
}

.status-active {
  background-color: #e8f5e9;
  color: #388e3c;
}

.status-inactive {
  background-color: #ffebee;
  color: #d32f2f;
}

.actions {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.actions button {
  padding: 5px 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

.view-btn {
  background-color: #9e9e9e;
  color: white;
}

.edit-btn {
  background-color: #2196f3;
  color: white;
}

.status-btn {
  color: white;
}

.enable-btn {
  background-color: #4caf50;
}

.disable-btn {
  background-color: #ff9800;
}

.delete-btn {
  background-color: #f44336;
  color: white;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.pagination button {
  margin: 0 5px;
  width: 36px;
  height: 36px;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
}

.pagination button.active {
  background-color: #4a90e2;
  color: white;
  border-color: #4a90e2;
}

/* 模态框样式 */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background-color: white;
  border-radius: 8px;
  width: 500px;
  max-width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.modal-content.modal-lg {
  width: 800px;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid #eee;
  position: sticky;
  top: 0;
  background-color: white;
  z-index: 1;
}

.modal-header h2 {
  margin: 0;
  font-size: 18px;
}

.close-btn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #666;
}

.modal-body {
  padding: 20px;
}

.modal-footer {
  padding: 15px 20px;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  position: sticky;
  bottom: 0;
  background-color: white;
  z-index: 1;
}

.product-details {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 20px;
}

.product-images {
  flex: 1;
  min-width: 300px;
}

.main-image {
  width: 100%;
  height: auto;
  border-radius: 4px;
  margin-bottom: 10px;
}

.image-thumbnails {
  display: flex;
  gap: 10px;
  overflow-x: auto;
}

.thumbnail {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 4px;
  cursor: pointer;
}

.product-info {
  flex: 1;
  min-width: 300px;
}

.product-info h3 {
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 20px;
}

.info-row {
  display: flex;
  margin-bottom: 10px;
}

.info-label {
  width: 100px;
  color: #666;
}

.info-value {
  flex: 1;
}

.info-value.price {
  color: #f44336;
  font-weight: bold;
}

.product-description {
  margin-bottom: 20px;
}

.product-description h3 {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 16px;
}

.description-content {
  line-height: 1.6;
  color: #333;
}

.product-specs {
  margin-bottom: 20px;
}

.product-specs h3 {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 16px;
}

.specs-table {
  width: 100%;
  border-collapse: collapse;
}

.specs-table td {
  padding: 8px 10px;
  border-bottom: 1px solid #eee;
}

.spec-name {
  width: 100px;
  color: #666;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.form-group textarea {
  min-height: 100px;
  resize: vertical;
}

.image-upload {
  display: flex;
  align-items: center;
  gap: 20px;
}

.upload-preview {
  width: 100px;
  height: 100px;
  border: 1px solid #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.preview-image {
  max-width: 100%;
  max-height: 100%;
}

.upload-btn {
  padding: 8px 15px;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
}

.specs-editor {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 15px;
}

.spec-item {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.spec-item input {
  flex: 1;
}

.remove-btn {
  padding: 5px 10px;
  background-color: #f44336;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.add-spec-btn {
  padding: 8px 15px;
  background-color: #4a90e2;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 10px;
}

.cancel-btn {
  padding: 8px 15px;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
}

.save-btn {
  padding: 8px 15px;
  background-color: #4a90e2;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

@media (max-width: 768px) {
  .action-bar {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .search-box {
    width: 100%;
  }
  
  .filter-buttons {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 10px;
  }
  
  .product-details {
    flex-direction: column;
  }
  
  .info-row {
    flex-direction: column;
  }
  
  .info-label {
    width: 100%;
    margin-bottom: 5px;
  }
  
  .spec-item {
    flex-direction: column;
  }
}
</style>